/*
 * @Author: liyongxuan
 * @Date: 2018-1-10 10:37:42
 * @Last Modified by: liyongxuan
 * @Last Modified time: 2018-1-10 10:37:42
 * @description 审批流程组件
 */
<template>
  <div class="ca-box ca-p-22 ca-m-t-15">
      <div class="ca-title">
          <el-row>
              <el-col :span="16">
                <span class="ca-ti-1">协议审批流程：</span>
                <span>(任何一步审批不通过都需要重新开始哦)</span>
              </el-col>
              <el-col :span="4">
                <el-button v-if="processBtnFlag" type="primary" @click="openDialogFormVisible" :disabled="disableStart==0||disableStart==1">＋发起审批</el-button>
              </el-col>
              <el-col :span="4">
                <el-select placeholder="发起审批时间" v-model="approvalTime" @change="getItemApprovalEntity">
                    <el-option v-for="(item,index) in approvalTimeList" :key="index" :label="$moment(item).format('YYYY-MM-DD HH:mm:ss')" :value="item">
                    </el-option>
                </el-select>
              </el-col>
          </el-row>
      </div>
      <div class="fw_box fw_box_02 ca-m-t-15" v-if="approvals!=[]">
            <div class="ca-review">
                <ul>
                    <li v-for="(item,i) in approvals" :key="i">
                        <div class="ca-review-ico">{{item.name}}</div>
                        <div class="ca-review-text">
                            <el-row class="ca-m-t-15" v-if="item.status==2">
                                <el-row>
                                    <el-col :span="2" class="ca-span-title">
                                        操作人：
                                    </el-col>
                                    <el-col :span="4">
                                        {{item.itemApprovalUserEntities[0].userId|getDepartmentById('userEntityList')}}
                                    </el-col>
                                    <el-col :span="2" class="ca-span-title">
                                        审批结果：
                                    </el-col>
                                    <el-col :span="2" :style="{color:getStyleByState(item.itemApprovalUserEntities[0].status)}">
                                        {{item.itemApprovalUserEntities[0].status==1?'通过':'不通过'}}                                        
                                    </el-col>
                                    <el-col :span="2" class="ca-span-title">
                                        时间：
                                    </el-col>
                                    <el-col :span="4">
                                        {{$moment(item.itemApprovalUserEntities[0].updateTime).format('YYYY-MM-DD hh:mm:ss A')}}
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="2" class="ca-span-title">
                                        意见：
                                    </el-col>
                                    <el-col :span="22" class="bak">
                                        {{item.itemApprovalUserEntities[0].opinion}}
                                    </el-col>
                                </el-row>
                            </el-row>
                            <el-row class="ca-m-t-15" v-else-if="item.status==1">
                                <template v-if="item.hasPower">
                                    <el-row>
                                        <el-col :span="2" class="ca-span-title">
                                            意见：
                                        </el-col>
                                        <el-col :span="22">
                                            <el-input id="item_info" type="textarea" :rows="2" :maxlength="3000" v-model="opinion"></el-input>
                                        </el-col>
                                    </el-row>
                                    <el-row class="ca-m-t-15">
                                        <el-col :offset="19" :span="2">
                                            <el-button type="success" @click="putItemApprovalEntity(1,item.id)">通过</el-button>
                                        </el-col>
                                        <el-col :span="2">
                                            <el-button type="danger" @click="putItemApprovalEntity(2,item.id)">不通过</el-button>
                                        </el-col>
                                    </el-row>
                                </template>
                                <template v-else>
                                    （正在审批）
                                </template>
                            </el-row>
                            <el-row class="ca-m-t-15" v-else-if="item.status==0">
                                <el-col :span="24" class="ca-c-darkgray">
                                    （尚未进行到该步骤）
                                </el-col>
                            </el-row>
                        </div>
                        <div class="clear"></div>
                    </li>
                </ul>
            </div>
        </div>
      <el-dialog title="发起审批" :visible.sync="dialogFormVisible">
            <el-form>
                <el-form-item label="备注：">
                    <el-input id="item_info" type="textarea" v-model="opinion" :rows="3" placeholder="不超过3000字" :maxlength="3000"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="startExaminationApproval()">确 定</el-button>
            </div>
        </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
    import {api} from '../../../api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    import { addRemind,isNoAuth } from '__service/utils';
    export default {
        data() {
            return {
                userId: this.$store.state.user.id,//用户id
                disableStart: 1,//发起审批按钮
                processBtnFlag: true, // 发起审批按钮是否可见
                dialogFormVisible: false,//弹窗flag
                approvals: [],//审批列表
                approvalTimeList: [],//审批历史时间列表
                approvalTime: null,//发起审批时间
                opinion: '',//意见
                approvalData: {},//审批数据
                roles: this.$store.state.user.roles,
            }
        },
        props: {
            itemId: {
                type: String,
                default: ''
            }
        },
        mounted() {
            isNoAuth('')
            this.hasPowerCreateApproval()
            this.getItemApprovalEntityTime()
            this.getItemApprovalEntity(0)
        },
        methods: {
            // 查询是否有权限发起审批
            async hasPowerCreateApproval() {
                const {resCode,data} = await apiHttp(api.GET_HAS_POWER_CREATE_APPROVAL,{dataId: this.itemId,processType: 1})
                if (resCode === STATUS_HTTP_SUCCESS) {
                    this.processBtnFlag = data
                }
            },
            // 打开发起审批对话框
            openDialogFormVisible() {
                this.dialogFormVisible = true
                this.opinion = ''
            },
            // 发起审批
            async startExaminationApproval() {
                let query = {
                    itemId: this.itemId,
                    opinion: this.opinion,
                    type: 1//1是协议审批
                }
                const {resCode,resMsg} = await apiHttp(api.POST_ITEM_APPROVAL_ENTITY,query)
                if (resCode === STATUS_HTTP_SUCCESS) {
                    this.addRed()
                    this.getItemApprovalEntity()
                    this.opinion = ''
                    this.dialogFormVisible = false
                } else {
                    this.$message({message: resMsg,type: 'error',center: true})
                }
            },
            // 审批
            async putItemApprovalEntity(status,id) {
                let query = {
                    id,
                    itemId: this.itemId,
                    opinion: this.opinion,
                    status,
                    type: 1
                }
                const {resCode,resMsg} = await apiHttp(api.PUT_ITEM_APPROVAL_ENTITY,query)
                if (resCode === STATUS_HTTP_SUCCESS) {
                    this.addRed()
                    this.opinion = ''
                    this.getItemApprovalEntity(0)
                    this.getItemApprovalEntityTime()
                } else {
                    this.$message({message: resMsg,type: 'error',center: true})
                }
            },
            // 查询审批列表
            async getItemApprovalEntity(val) {
                let query = {
                    itemId: this.itemId,
                    type: 1,
                    createDate: val
                }
                const {resCode,data} = await apiHttp(api.GET_ITEM_APPROVAL_ENTITY,query)
                if (resCode === STATUS_HTTP_SUCCESS) {
                    this.approvals = data.itemApprovalRoleVos
                    if (this.approvals !== null && this.approvals.length > 0) {
                        this.approvals.map(u => {
                            this.roles.map(i => {
                                if (u.roleId === i.id) {
                                    u.name = i.name
                                }
                            })
                        })
                    }
                    this.disableStart = data.status
                }
            },
            // 查询审批历史时间
            async getItemApprovalEntityTime() {
                const {resCode,data} = await apiHttp(api.GET_ITEM_APPROVAL_ENTITY_TIME,{itemId: this.itemId,type: 1})
                if (resCode === STATUS_HTTP_SUCCESS) {
                    this.approvalTimeList = data
                }
            },
            //   审批结果字体颜色
            getStyleByState(state) {
                if (state === 1) {
                    return '#0ac50a';
                } else {
                    return 'red';
                }
            },
            // 添加小红点
            async addRed() {
                await addRemind({
                    dataId: this.itemId || '', // 业务id
                    dataTab: 5, // tab页顺序 head 也为0
                    dataType: 1, // 1拟投资项目,2已投资项目,3母基金,4拟设立基金,5已设立基金,6客户,7潜在项目
                });
                // 根据第三方组件来调用 父组件中定义的方法 重新获取小红点
                this.$root.Dot.$emit('getDotList');
            },
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.ca-ti-1{
    font-size: 20px
}
.bak{
    word-wrap: break-word
}
</style>
